<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .showContainer {
            width: 520px;
            height: 280px;
            border: 1px solid;
            margin: 0 auto;
            overflow: hidden;
            position: relative;
        }

        .imgShow {
            width: 2600px;
            position: absolute;
            left: 0px;
            top: 0px;
        }

        .imgShow img {
            float: left;

        }
    </style>
</head>

<body>
    <div class="showContainer">
        <div class="imgShow">
            <!-- div存放 所有的图片 -->
            <img src="./imgs/1t.png" alt="">
            <img src="./imgs/2t.png" alt="">
            <img src="./imgs/3t.png" alt="">
            <img src="./imgs/4t.png" alt="">
            <img src="./imgs/5t.png" alt="">
        </div>

    </div>

    <script>
        // 无限轮播 ： 最后一张图 滚动到第一张 ，最后一张图后 添加一个第一张图，滚动到最后添加的第一张图的时候 直接跳到 第一张上面，产生视觉错觉。
        // 最后一张后面添加一个 第一张图片
        var imgShowEle = document.querySelector(".imgShow");
        /* 
        0  ----》  -520
        1 --- 》 -1040
        2 ----》 -1560 
        3 ----》   -(i+1)*520
        
        */

        var index = 0;  // 代表 图片所在的下标


        // 通过js 复制第一张图 ，然后放在最后一张图后面

        function copyFirstImg(){
            // 获取第一张图 ；
            var firstImg = imgShowEle.firstElementChild;
            // 复制第一张图 ；
            var copyFirstImg =  firstImg.cloneNode(true);
            // 修改容器的宽度
            imgShowEle.style.width = "3120px";
            imgShowEle.appendChild(copyFirstImg);

        }


        copyFirstImg();

        setInterval(function () {
            move(imgShowEle, -(index + 1) * 520, "left", function () {
                console.log("运动完成");
                index++;
                // console.log(index);
                if(index==5){
                    index = 0;
                    imgShowEle.style.left = "0";
                }
            })
        }, 2000)



        function move(ele, target, dir, cb) {
            var timer = setInterval(function () {
                var num = parseInt(getComputedStyle(ele, null)[dir]);
                // console.log(num);
                if (num == target) {
                    cb && cb();
                    clearInterval(timer);
                } else {
                    num += 10 * (target > num ? 1 : -1);
                    ele.style[dir] = num + "px";
                }
            }, 10)
        }
    </script>

</body>

</html>